<template>
	<view class="device-list">
		<view class="device-list-box" v-if="datalist.length > 0">
			<view class="item-title">
				<text style="width: 50%;">设备编号</text>
				<text style="width: 25%;text-align: center;">笔数</text>
				<text style="width: 25%;text-align: center;">合计收入</text>
			</view>
			<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
				<text style="width: 50%;">
					{{ item.name }}
				</text>
				<text style="width: 25%;text-align: center;">{{ item.order_num }}</text>
				<text style="width: 25%;text-align: center;">
					{{ item.shouyi }}
					<image src="../../static/images/user/返回备份 20@2x.png" mode=""></image>
				</text>
			</view>
			<view class="more-tip">～没有更多了～</view>
		</view>
		<view class="empty-box" v-else>
			<image src="../../static/images/nodata.png"></image>
			<text>暂无记录～</text>
		</view>
	</view>
</template>

<script>
import api from '@/api/index.js';
export default {
	data() {
		return {
			datalist: [],
			ground_id: null
		};
	},
	onLoad(e) {
		console.log('ground_id: ', e);
		this.ground_id = e.ground_id;
		this.getDeviceList();
	},
	methods: {
		getDeviceList() {
			api.getDeviceList({ ground_id: this.ground_id }).then(res => {
				this.datalist = res.data;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.device-list {
	background: url('/static/images/home/home-bg.png') no-repeat;
	background-size: 100% 408rpx;
	padding-bottom: 100rpx;
	padding: 28rpx;
	.device-list-box {
		background: url('../../static/images/home/empty-bg.png') no-repeat;
		background-size: 100% 100%;
		padding: 40rpx 28rpx 100rpx;
		position: relative;
		margin: 0 -4rpx 20rpx -2rpx;
		.item-title {
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 550;
			font-size: 30rpx;
			color: #000000;
			line-height: 92rpx;
			border-bottom: 2rpx solid #d3ebff;
			justify-content: space-between;
			uni-text {
			}
		}
		.device-list-item {
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 92rpx;
			border-bottom: 2rpx solid #d3ebff;
			justify-content: space-between;
			uni-text {
				uni-image {
					width: 14rpx;
					height: 24rpx;
					text-align: right;
				}
			}
		}
		.more-tip {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #a7a5a5;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			margin-top: 40rpx;
		}
	}
	.btn {
		background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #ffffff;
		line-height: 88rpx !important;
		text-align: right;
		font-style: normal;
		height: 88rpx;
		margin: 36rpx 28rpx;
		width: calc(100% - 56rpx);
		text-align: center;
		border: none;
		&:after {
			border: none;
		}
	}
	.empty-box {
		margin: 0 -20rpx;
		text-align: center;
		background: url('../../static/images/home/empty-bg.png') no-repeat;
		padding: 200rpx 0 160rpx;
		background-size: 100% 100%;
		uni-image {
			width: 400rpx;
			height: 340rpx;
		}
		uni-text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #a7a5a5;
			line-height: 40rpx;
			font-style: normal;
			margin-top: 50rpx;
			display: block;
		}
	}
}
</style>
